<template>
  <div class="">
    <el-row class="row">
      <div v-for="toolItem in toolItems" class="toolbar">
        <div class="toolbar-item">
          <el-dropdown v-if="toolItem.subItems" trigger="hover" class="dropdown">
              <span class="el-dropdown-link">
                {{toolItem.title}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            <el-dropdown-menu slot="dropdown">
              <div v-for="subToolItem in toolItem.subItems">
                <el-dropdown-item>{{subToolItem}}</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-if="!(toolItem.subItems==null)" class="toolbar-item">
          {{toolItem.title}}
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    toolItems: {
      type: Array,
      default: () => {
        return [
          {
            title: 'test',
            subItems: [
              'test'
            ]
          },
          {
            title: 'test2'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
  .row {
    background: rgb(30, 150, 240);
    height: 50px;
  }

  .toolbar-item {
    text-align: center;
    padding: 12px 20px 0 20px;
    height: 100%;
    font-size: 18px;
    color: white;
  }

  .toolbar-item:hover {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.04);
  }

  .toolbar {
    height: 100%;
    display: flex;
  }

  .el-dropdown-link {
    font-size: 18px;
    color: white;
  }
</style>
